import './index.less';

import { Button, Col, Form, Row } from 'antd';
import React, { useEffect } from 'react';
import classnames from 'classnames';
import { constants } from '../../contants'
import { ResourceManagerProps } from '../../ResourceManagerProps';

const prefixCls = constants.filterViewPrefix;
export type FilterViewBlockProps = ResourceManagerProps & {
  onFilterFormChange: (allValues: any) => void;
  light?: boolean; // 是否轻量模式
}

export const FilterViewBlock: React.FC<FilterViewBlockProps> = (props) => {
  const {
    filterFields,
    componentsMap,
    onFilterFormChange,
    filterValues,
    actions,
    features,
    light
  } = props;
  const [form] = Form.useForm();
  const { searchText, resetText, isShowResetButton = true } = features?.filterProps || {};

  useEffect(() => {
    form.setFieldsValue(filterValues);
  }, [filterValues]);

  return (
    <div
      className={classnames({
        [prefixCls]: true,
        [`${prefixCls}-light`]: light
      })}
    >
      <Form
        onFinish={onFilterFormChange}
        form={form}
        onValuesChange={(_changedValues, allValues) => {
          if (light) onFilterFormChange(allValues);
        }}

      >
        <Row justify={light ? 'end' : 'start'} style={{ margin: '0 -12px' }}>
          {
            filterFields?.map((item: any, i: number) => {
              const Comp = componentsMap[item.componentName];
              return light ? (
                <div className={`${prefixCls}-item ${prefixCls}-item-light`} key={i}>
                  <Comp {...item} light={light} />
                </div>
              ) : (
                <Col span={8} className={`${prefixCls}-item`} key={i}>
                  <Comp {...item} light={light} />
                </Col>
              )
            })}
          {!light && (
            <Col flex={1} className={`${prefixCls}-buttons`}>
              <Form.Item>
                {isShowResetButton && (
                  <Button
                    type="ghost"
                    className={`${prefixCls}-button`}
                    onClick={() => {
                      form.resetFields();
                    }}
                  >
                    {resetText || '重置'}
                  </Button>
                )}
                <Button type="primary" className={`${prefixCls}-button`} htmlType="submit">
                  {searchText || '查询'}
                </Button>
                {
                  actions?.filter((item: any) => item.position === 'FilterView')
                    .map((item: any, i: number) => (
                      <Button
                        className={`${prefixCls}-button`}
                        key={i}
                        icon={item.icon}
                        type={item.type || 'primary'}
                        onClick={() => {
                          item.handler('filter')
                        }}
                      >
                        {item.label}
                      </Button>
                    ))
                }
              </Form.Item>
            </Col>
          )}
        </Row>

      </Form>
    </div>
  )
}
